<template>
<view class="fenlei">
		
   <!-- 左侧 -->
   <view class='zuo' :style="'height:'+gaodu+'px'">
       <block >
          <view class="type-nav" >
          分类1
          </view>
       </block>
       <block >
          <view class="type-nav xuanzhong" >
          分类2
          </view>
       </block>
       <block >
          <view class="type-nav" >
          分类3
          </view>
       </block>			  
   </view>

 
   <!-- 右侧 -->
   <scroll-view scroll-y class='you' :style="'height:'+gaodu+'px'" >
   
<!--首页-最新案例-->
<navigator url='' class='anli'>
  <image src='/static/tupian/cp03.jpg' mode='widthFix' class='anli-tupian'></image>
  <view class='anli_jieshao'>
    <text class='anli_biaoti1'>女洋气婆婆毛呢上衣短款</text>
    <text class='anli_biaoti2'>类型：2020年冬装</text>
    <text class='anli_biaoti3'>适合：40-50岁中老年女冬装</text>
  </view>
</navigator>

<navigator url='' class='anli'>
  <image src='/static/tupian/cp04.jpg' mode='widthFix' class='anli-tupian'></image>
  <view class='anli_jieshao'>
    <text class='anli_biaoti1'>女洋气婆婆毛呢上衣短款</text>
    <text class='anli_biaoti2'>类型：2021年冬装</text>
    <text class='anli_biaoti3'>适合：40-50岁中老年女冬装</text>
  </view>
</navigator>

<navigator url='' class='anli'>
  <image src='/static/tupian/cp01.jpg' mode='widthFix' class='anli-tupian'></image>
  <view class='anli_jieshao'>
    <text class='anli_biaoti1'>女洋气婆婆毛呢上衣短款</text>
    <text class='anli_biaoti2'>类型：2022年冬装</text>
    <text class='anli_biaoti3'>适合：40-50岁中老年女冬装</text>
  </view>
</navigator>

<navigator url='' class='anli'>
  <image src='/static/tupian/cp04.jpg' mode='widthFix' class='anli-tupian'></image>
  <view class='anli_jieshao'>
    <text class='anli_biaoti1'>女洋气婆婆毛呢上衣短款</text>
    <text class='anli_biaoti2'>类型：2023年冬装</text>
    <text class='anli_biaoti3'>适合：40-50岁中老年女冬装</text>
  </view>
</navigator> 
 <navigator url='' class='anli'>
   <image src='/static/tupian/cp03.jpg' mode='widthFix' class='anli-tupian'></image>
   <view class='anli_jieshao'>
     <text class='anli_biaoti1'>女洋气婆婆毛呢上衣短款</text>
     <text class='anli_biaoti2'>类型：2020年冬装</text>
     <text class='anli_biaoti3'>适合：40-50岁中老年女冬装</text>
   </view>
 </navigator>
 
 <navigator url='' class='anli'>
   <image src='/static/tupian/cp04.jpg' mode='widthFix' class='anli-tupian'></image>
   <view class='anli_jieshao'>
     <text class='anli_biaoti1'>女洋气婆婆毛呢上衣短款</text>
     <text class='anli_biaoti2'>类型：2021年冬装</text>
     <text class='anli_biaoti3'>适合：40-50岁中老年女冬装</text>
   </view>
 </navigator>
 
 <navigator url='' class='anli'>
   <image src='/static/tupian/cp01.jpg' mode='widthFix' class='anli-tupian'></image>
   <view class='anli_jieshao'>
     <text class='anli_biaoti1'>女洋气婆婆毛呢上衣短款</text>
     <text class='anli_biaoti2'>类型：2022年冬装</text>
     <text class='anli_biaoti3'>适合：40-50岁中老年女冬装</text>
   </view>
 </navigator>
 
 <navigator url='' class='anli'>
   <image src='/static/tupian/cp04.jpg' mode='widthFix' class='anli-tupian'></image>
   <view class='anli_jieshao'>
     <text class='anli_biaoti1'>女洋气婆婆毛呢上衣短款</text>
     <text class='anli_biaoti2'>类型：2023年冬装</text>
     <text class='anli_biaoti3'>适合：40-50岁中老年女冬装</text>
   </view>
 </navigator> 
 
 
   </scroll-view>
 
		
</view>
</template>

<script>
	export default {
		data() {
			return {
				 gaodu:0,
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.gaodu = res.windowHeight;
				}
			})
		},
		methods: {

		}
	}
</script>

<style>
 /*左右框架的样式*/
 .fenlei{
   height: 100%;
   box-sizing: border-box;
   background-color: #f4f4f4;
   display: flex;
   width: 100%;
 }
 /*框架左边样式*/
 .zuo{
   width: 25%;
   border-right: 1px solid #ddd;
   font-size: 14px; 
   height: 100%;
   display: flex;
   flex-direction: column;
 }
  /*框架右边样式*/
 .you{
   width: 75%;
   background-color: white;
 }

 /*左侧菜单的样式*/
.type-nav{
	padding: 10px 5px;
	position: relative;
	text-align: center;
	border-bottom: 1px solid #ddd;
	z-index: 10;
  padding: 5px;
}
 /*左侧菜单-选中的样式*/
.xuanzhong{
  color: #333; background-color: white;
  padding: 5px;
}

/*最新案例（1行2列-右列分3行）*/
.anli {
  display: flex;
  border-bottom: 1px dotted gray;
}
.anli-tupian {
  width: 80px;
  margin: 5px;
  border: 2px solid gainsboro;
}
.anli_jieshao {
  display: flex;
  flex-direction: column;
  margin-left: 3px;
}
.anli_biaoti1 {
  font-size: 16px;
}
.anli_biaoti2 {
  font-size: 12px;
  color: gray;
  margin-top: 5px;
  margin-bottom: 5px;
}
.anli_biaoti3 {
  font-size: 14px;
  color: grey;
}
</style>
